<!--
 * @Description: ACCA题库列表页 -- AccAQuestionbank
 * @Author: your name
 * @Date: 2024-01-18
 * @LastEditTime: 2024-01-18
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="heart_w" style="display: flex">
      <div class="questionbank">
        <div class="listBox">
          <div class="item" v-for="item in 4" :key="item.cid">
            <div class="section" @click="clickContent(item, item.cid)">
              <div class="left_t">
                <img
                  src="@/assets/images/testList.png"
                  alt=""
                  style="width: 18px; height: 14px"
                />
                <p>3333</p>
              </div>
              <div class="commonRight">
                <span>共（44）题</span>
                <!-- <span class="correct">0%</span>
                <span class="gray">共69</span> -->
              </div>
            </div>

            <div class="innerChilds">
              <div
                class="testPaper section"
                v-for="item_t in 2"
                :key="item_t.cid"
                v-show="item_val"
              >
                <div class="left_t">
                  <img src="@/assets/images/tip.png" alt="" />
                  <p>12</p>
                </div>
                <div class="commonRight">
                  <span>总题数: 23道</span>
                  <!-- <span class="correct">0%</span>
                  <span class="gray">共69</span> -->
                  <el-button round size="mini" @click="startExercise">
                    开始做题
                  </el-button>
                  <!-- <el-button round size="mini">查看报告</el-button>
                  <el-button round size="mini">继续做题</el-button> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧导航栏 -->
      <div class="iconlist">
        <a href="#">
          <!-- <i class="el-icon-document"></i> -->
          <i></i>
          <p>错题集</p>
        </a>
        <a href="#">
          <i class="el-icon-edit"></i>
          <p>12313</p>
        </a>
        <a href="#">
          <i class="el-icon-edit"></i>
          <p>12313</p>
        </a>
        <a href="#">
          <i class="el-icon-edit"></i>
          <p>12313</p>
        </a>
        <a href="#">
          <i class="el-icon-edit"></i>
          <p>12313</p>
        </a>
        <a href="#">
          <i class="el-icon-edit"></i>
          <p>返回</p>
        </a>
      </div>
    </div>

    <!-- Dialog 做题模式/ 练习模式 -->
    <el-dialog
      title="请选择做题模式"
      :visible.sync="centerDialogVisible"
      width="32%"
      center
    >
      <div class="clearBox">
        <a href="javascript:void(0);" @click="questionbank_Keycode(1)">
          <el-image
            src="https://www.rongyuejiaoyu.com/static/static/img/lianximoshi.1eabfc1.png"
          ></el-image>
          <h6>练习模式</h6>
          <p>解题思路随时查看</p>
        </a>
        <a href="javascript:void(0);" @click="questionbank_Keycode(0)">
          <el-image
            src="https://www.rongyuejiaoyu.com/static/static/img/ceshimoshi.764e30d.png"
          ></el-image>
          <h6>背题模式</h6>
          <p>解题思路随时查看</p>
        </a>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AccAQuestionbank',
  data() {
    return {
      second_level: [], // 二级
      questions: [],
      item_val: false,
      centerDialogVisible: false
    }
  },
  created() {},
  methods: {
    clickContent(el, id) {
      if (this.item_val == false) {
        this._itemsinit(id)
      }
      this.item_val = !this.item_val
    },
    _itemsinit(cid) {
      // 手风琴模式
      this.questions.forEach((el, index) => {
        this.item_val = false
      })
      console.log(4444444)
    },
    startExercise() {
      this.centerDialogVisible = true
    },
    questionbank_Keycode(id) {
      // 1.练习模式 2. 背题模式
      this.$router.push({
        path: '/exam_practice/Acca',
        query: { cid: id }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/frm_cfa.scss';
</style>
